<template>
    <div class="common-layout">
        <el-container>
            <el-main style="border-style: groove;border-width: 1.5px;height: 560px;margin-top: 40px;">
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column type="index" width="60" label="序号"/>
                    <el-table-column prop="id" label="流程ID" />
                    <el-table-column prop="title" label="标题" />
                    <el-table-column prop="stepName" label="当前步骤" />
                    <el-table-column prop="auditName" label="当前审批人" />
                    <el-table-column prop="createName" label="申请人" />
                    <el-table-column prop="state" label="当前审批状态" />
                    <el-table-column prop="compeltaTime" label="完成时间">
                        <template v-slot="scope">
                            <el-tag type="primary" v-if="scope.row.compeltaTime!=null">{{ scope.row.compeltaTime}}</el-tag>
                            <el-tag type="primary" v-else>等待审批完成</el-tag>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="demo-pagination-block">
                    <el-pagination v-model:current-page="info.pageIndex" v-model:page-size="info.pageSize"
                        next-text="下一页" :page-sizes="[3, 4, 5, 6]" :size="size" :disabled="disabled" background
                        prev-text="上一页" layout="total, sizes, prev, pager, next, jumper" :total="info.totaCount"
                        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                </div>
            </el-main>
        </el-container>
    </div>
</template>
<script lang="ts" setup>
import axios from 'axios';
import { tabsEmits } from 'element-plus';
import { reactive, ref, onMounted } from 'vue';
const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
}
const size = ref('default')
const disabled = ref(false)
onMounted(() => {
    show()
})

const definition: any = ref([])

const tableData: any = ref([])

const info: any = reactive({
    pageIndex: 1,
    pageSize: 3,
    totaCount: 0,
    pageCount: 0,
})

const show = () => {
    axios({
        url: 'http://59.110.123.186:4405/api/Management/InstanceShow',
        method: 'get',
        params: {
            pageIndex: info.pageIndex,
            pageSize: info.pageSize
        }
    })
        .then(res => {
            tableData.value = res.data.data.pageData
            info.totaCount = res.data.data.totaCount
            info.pageCount = res.data.data.pageCount

        })
}


</script>